<template>
  <div class="pd-le-ri">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <el-icon :size="11"><user-filled /></el-icon> 反馈列表
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div style="margin: 20px 0 30px">
        <el-table
          :data="tableData.arr"
          border
          style="width: 100%"
          :stripe="true"
        >
          <el-table-column
            prop="comment"
            label="反馈内容"
            width="500"
          ></el-table-column>
          <el-table-column
            prop="type"
            label="反馈类型"
            width="250"
          ></el-table-column>
          <el-table-column align="center" label="反馈图片" width="180">
            <template v-slot="scope">
              <el-image
                style="width: 50px; height: 50px"
                fit="cover"
                :src="scope.row.img"
                :preview-src-list="[scope.row.img]"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template v-slot="scope">
              <el-button
                size="small"
                v-if="scope.row.isHandle == 0"
                type="primary"
                @click="handleFeedbck(scope.row.id)"
                >确认已处理</el-button
              >
              <el-tag class="ml-2" type="success" v-if="scope.row.isHandle == 1"
                >已处理</el-tag
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-bottom: 10px">
        <div class="demo-pagination-block">
          <el-pagination
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { getFeedbackList, deaFeedback } from "../../http/feedback/feedback";
import { UserFilled } from "@element-plus/icons";

export default defineComponent({
  components: {
    UserFilled,
  },
  setup() {
    let tableData = reactive({
      arr: [],
    });
    let total = ref();
    let page: number = 1;
    const dialogVisible = ref(false);

    onMounted(() => {
      getList();
    });

    const getList = async () => {
      const res: any = await getFeedbackList(page);
      tableData.arr = res.data.records;
      total.value = res.data.total;
    };

    const handleCurrentChange = (e: number) => {
      page = e;
      getList();
    };

    const clickBtn = () => {
      getList();
    };

    const handleFeedbck = async (e: string) => {
      await deaFeedback(e);
      getList()
    };

    return {
      tableData,
      total,
      handleCurrentChange,
      clickBtn,
      handleFeedbck,
    };
  },
});
</script>

<style scoped>
</style>
